<template>
    <button class="g-button" :class="{[`icon-${iconPosition}`]: true}" @click="btnClick">
<!--        <svg v-if="icon" class="icon" aria-hidden="true">-->
<!--            <use :xlink:href=`#icon-${icon}`></use>-->
<!--        </svg>-->
        <g-icon v-if="icon && !loading" :name="icon" :class="icon"></g-icon>
        <g-icon v-if="loading" name="loading" class="loading"></g-icon>
        <div class="content">
            <slot>按钮</slot>
        </div>
    </button>
</template>

<script>
    export default {
        name: "Button",
        props: {
            icon: {},
            iconPosition: {
                type: String,
                default: 'left',
                validator(value) {
                    return !(value !== 'left' && value !== 'right');
                }
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            btnClick () {
                // this.loading = !this.loading;
                this.$emit('click');
            }
        }
    }
</script>

<style lang="scss" scoped>
    @keyframes loadingMove {
        0% { transform: rotate(0); }
        100% { transform: rotate(100deg); }
    }
    .g-button {
        height: var(--button-height);
        font-size: var(--font-size);
        padding: 0 1em;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        background-color: var(--button-bg);
        vertical-align: middle; /*该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐*/
        display: inline-flex;
        justify-content: center;
        align-items: center;

        &:hover {
            border-color: var(--border-color-hover);
        }

        &:active {
            background-color: var(--button-active-bg);
        }

        &:focus {
            outline: none;
        }

        > .g-icon {
            order: 1;
            margin-right: .1em;
        }

        > .content {
            order: 2;
        }

        &.icon-right {
            > .g-icon {
                order: 2;
                margin-left: .1em;
                margin-right: 0;
            }

            > .content {
                order: 1;
            }
        }

        .loading {
            animation: loadingMove 1s linear infinite;
        }

    }

</style>